<template>
	<view :style="img_view">
		<view style="width: 90%;height: 15%;" v-if="showWall"></view>
		<image :class="img" v-for="(item,index) in imageArr" :key="index" :src="item" mode=""></image> 
		<view style="width: 90%;height: 15%;" v-if="showWall"></view>
	</view>
</template>

<script>
	export default {
		props:{
			// rpx 图像高度 
			height:{
				type: Number,
				default: 200
			},
			// rpx 图像宽度
			width:{
				type: Number,
				default: 200
			},
			// 是否圆形
			round:{
				type: Boolean,
				default: false
			},
			// 内边距 百分比赋值
			padding:{
				type: Number,
				default: 0.2
			},
			imageArr:{
				type: Array, 
				default: []
			},
			// 背景色
			bgColor:{
				type: String,
				default: '#ffffff'
			},
		},
		data() {
			return { 
				img:'',
				nums:0,
				showWall: false, 
			}  
		},
		computed: {
			img_view(){
				this.nums = this.imageArr.length > 9 ? 9: this.imageArr.length
				this.img = 'image' + this.nums
				var str = 'overflow:hidden;'
				if(this.round){
					str +="border-radius:50%;"
				}
				if(this.nums < 5){
					str += "width: "+this.width+"rpx;height: "+this.height+"rpx;background-color: "+ this.bgColor +";display: flex;align-items: center;justify-content: space-around;padding: "+this.padding+"%;flex-wrap: wrap;"
				}else if(this.nums == 5 || this.nums == 6){
					this.showWall = true
					str += "width: "+this.width+"rpx;height: "+this.height+"rpx;background-color: "+ this.bgColor +";display: flex;justify-content: center;padding: "+this.padding+"%;flex-wrap: wrap;"
				}else if(this.nums > 6){ 
					str += "width: "+this.width+"rpx;height: "+this.height+"rpx;background-color: "+ this.bgColor +";display: flex;justify-content: center;padding: "+this.padding+"%;flex-wrap: wrap;"
				}
				
				return str
			},
		}, 
		methods: {
			
		}
	}
</script>

<style>
	.image1{
		width: 80%;
		height: 80%;
	}
	.image2{
		width: 48%;
		height: 48%;
	}
	.image3{
		width: 48%;
		height: 48%;
	}
	.image3:nth-child(1){
		margin: 0 20%;
	}
	.image4{
		width: 48%;
		height: 48%;
	}
	.image5,.image6,.image7,.image8,.image9{
		width: 31%;
		height: 31%;
		margin: 1%;
	}
	.image5:nth-child(2){
		margin-left:  15%;
	}
	.image5:nth-child(3){
		margin-right:  15%;
	}
	.image7:nth-child(1){
		margin: 0 30%;
	}
	.image8:nth-child(1){
		margin-left:  15%;
	}
	.image8:nth-child(2){
		margin-right:  15%;
	}
	
</style>
